﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>touch.js demo</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
    <script type="text/javascript" src="js/touch.min.js"></script>
    <script type="text/javascript" src="js/cat.touchjs.js"></script>
   <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
</head>
<style>
*{margin:0;padding:0;}
p{margin:10px 0;}
img{max-width:100%;}
</style>
<body>
        <!-- <ul>
                <li><span>left：</span><span id="left">0</span></li>
                <li><span>top：</span><span id="top">0</span></li>
                <li><span>scale：</span><span id="scale">1</span></li>
                <li><span>rotate：</span><span id="rotate">0</span></li>
            </ul> -->
<img id="targetObj" style="position:fixed;z-index:9;transform-origin:center;" />
    <div id="other">
            <p>1111111111</p>
            <p>2222222222</p>
            <p>3333333333</p>
            <p>4444444444</p>
            <p>5555555555</p>
            <p>6666666666</p>
            <p>7777777777</p>
            <p>8888888888</p>
            <img src="aa.jpg?v=1" alt="">
            <p>aaaaaaaaaaa</p>
            <p>bbbbbbbbbbb</p>
            <p>ccccccccccc</p>
            <p>ddddddddddd</p>
            <p>eeeeeeeeeeee</p>
            <p>fffffffffffff</p>
            <p>gggggggggggg</p>
            <p>hhhhhhhhh</p>
            <img src="bb.jpg?v=1" alt="">
            <p>iiiiiiiiiiii</p>
            <p>jjjjjjjjjjjjjjj</p>
            <p>kkkkkkkkkkkkk</p>
            <p>lllllllllllllll</p>
            <p>mmmmmmmmmmmmm</p>
            <p>nnnnnnnnnnnnnn</p>
            <p>ooooooooooo</p>
            <p>pppppppppppp</p>
            <img src="cc.jpg?v=1" alt="">
            <p>qqqqqqqqqqqqqqqq</p>
            <p>rrrrrrrrrrrrrrrrr</p>
            <p>ssssssssssssssss</p>
        </div>
<div id="mask" class="mask" style="position:fixed;z-index:6;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.8);display:none;"></div>
    <script type="text/javascript">
    //封装tap事件
HTMLElement.prototype.myTap=HTMLElement.prototype.myTap||function (callBack) {
    var myTapStart=0,
        myTapEnd=0,
        timeTap=300;
    this.addEventListener("touchstart",function (e) {
        //获取touchstart事件的时间戳
        myTapStart=e.timeStamp;
        //changedTouchs是事件对象TouchEvent上面的属性,上面存储了一个当前操作的信息。
        let point=e.changedTouches[0];
       this.strX=point.pageX;
       this.strY=point.pageY;
       this.isMove=false;
    },false);
    this.addEventListener("touchmove",function (e) {
        let point=e.changedTouches[0];
        let changeX=point.pageX-this.strX;
        let changeY=point.pageY-this.strY;
        if(Math.abs(changeX)>10||Math.abs(changeY)>10){
            this.isMove=true;
        }
    },false);
    this.addEventListener("touchend",function (e) {
        //获取touchend事件的时间戳
        myTapEnd=e.timeStamp;
        var _timeTap=myTapEnd-myTapStart;
        if(!this.isMove&&_timeTap<=timeTap){
            callBack();
        }
    },false);
};

$('#other img').click(function(){
    //document.title='other img'+cat.touchjs.scaleVal
    var _pic=$(this).attr('src')
    $('#targetObj').attr('src',_pic).show()
    $('#mask').show()
})

$('#mask').click(function (e) {
    closePopImng()
})
document.querySelector("#targetObj").myTap(function () {
    closePopImng()
});

function closePopImng(){
    var $targetObj = $('#targetObj');
    $targetObj.css({
        'transform': 'scale(' + 1 + ') rotate(' + 0 + 'deg)',
        '-webkit-transform': 'scale(' + 1 + ') rotate(' + 0 + 'deg)'
    });
    $('#targetObj').attr('src', null).show()
    $('#mask').hide()
    $('#targetObj').hide()
    cat.touchjs.initialScale = 1
}







        $(function () {
            var $targetObj = $('#targetObj');
            //初始化设置
            cat.touchjs.init($targetObj, function (left, top, scale, rotate) {
//$('#left').text(left);
//$('#top').text(top);
//$('#scale').text(scale);
//document.title=(scale);
//$('#rotate').text(rotate);
                $targetObj.css({
                    left: left,
                    top: top,
                    'transform': 'scale(' + scale + ') rotate(' + rotate + 'deg)',
                    '-webkit-transform': 'scale(' + scale + ') rotate(' + rotate + 'deg)'
                });
            });
            //初始化拖动手势（不需要就注释掉）
            cat.touchjs.drag($targetObj, function (left, top) {
                // $('#left').text(left);
                // $('#top').text(top);
            });
            //初始化缩放手势（不需要就注释掉）
            cat.touchjs.scale($targetObj, function (scale) {
                //document.title='在外层'+scale;
                $targetObj.css({
                    'transform': 'scale(' + scale + ') ',
                    '-webkit-transform': 'scale(' + scale + ') '
                });
            });
        });
</script>
</body>
</html>